<template>
  <div style="margin-top: 20px">
    <el-form ref="formRef" labelWidth="150px" :model="form" :rules="rules">
      <el-form-item label="通信协议" prop="Protocol">
        <el-radio-group v-model="form.Protocol">
          <el-radio label="OpcUa">OpcUa</el-radio>
          <el-radio label="ModBus">ModBus</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="form.Protocol == 'ModBus'">
        <el-form-item label="IP">
          <el-input v-model="form.OpcUa.ip" />
        </el-form-item>
        <el-form-item label="端口号" prop="ModBus.Port">
          <el-input v-model="form.ModBus.Port" />
        </el-form-item>
      </template>
      <template v-else-if="form.Protocol == 'OpcUa'">
        <el-form-item label="OPC服务器URL">
          <el-input v-model="form.OpcUa.Url" />
        </el-form-item>
        <el-form-item label="是否匿名登录" prop="OpcUa.Anonymity">
          <el-radio-group v-model="form.OpcUa.Anonymity">
            <el-radio label="是">是</el-radio>
            <el-radio label="否">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户名" prop="OpcUa.UserName">
          <el-input v-model="form.OpcUa.UserName" />
        </el-form-item>
        <el-form-item label="密码" prop="OpcUa.PassWord">
          <el-input v-model="form.OpcUa.PassWord" />
        </el-form-item>
      </template>
      <el-form-item prop="ModBus.RegisterConfig">
        <vab-form-table
          v-model="form.ModBus.RegisterConfig"
          drag
          :row-template="rowTemplate"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            label="动作/参数名称"
            prop="ActionOrParam"
          >
            <template #default="{ row }">
              <el-input v-model="row.ActionOrParam" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="寄存器地址"
            prop="RegisterAddress"
          >
            <template #default="{ row }">
              <el-input v-model="row.RegisterAddress" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否读写" prop="ReadOrWrite">
            <template #default="{ row }">
              <el-input v-model="row.ReadOrWrite" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="数据类型" prop="ValueType">
            <template #default="{ row }">
              <el-input v-model="row.ValueType" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="为真值" prop="TrueValue">
            <template #default="{ row }">
              <el-input v-model="row.TrueValue" />
            </template>
          </el-table-column>
        </vab-form-table>
      </el-form-item>
    </el-form>
    <div class="pay-button-group">
      <el-button @click="handleSubmit1">上一步</el-button>
      <el-button :loading="loading" type="primary" @click="handleSubmit">
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
  import VabFormTable from '@/extra/VabFormTable'

  export default {
    components: { VabFormTable },
    data() {
      return {
        formRef: null,
        rowTemplate: {
          ActionOrParam: '',
          RegisterAddress: '',
          ReadOrWrite: '',
          ValueType: '',
          Length: '',
          TrueValue: '',
        },
        form: {
          Protocol: 'OpcUa',
          ModBus: {
            Port: '',
            RegisterConfig: [],
          },
          OpcUa: {
            Anonymity: '是',
            UserName: '',
            PassWord: '',
          },
        },
        rules: {
          Protocol: [
            { required: true, message: '请输入通信协议', trigger: 'blur' },
          ],
          'ModBus.Port': [
            { required: true, message: '请输入端口号', trigger: 'blur' },
          ],
          'OpcUa.UserName': [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          'OpcUa.PassWord': [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ],
        },
        loading: false,
      }
    },
    mounted() {},
    methods: {
      handleSubmit1() {
        this.$emit('change-step', 0)
      },
      handleSubmit() {
        this.$refs['formRef'].validate((valid) => {
          if (valid) {
            this.$emit('change-step', 6, { CommunicationInfo: this.form })
          } else {
            this.loading = false
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .pay-button-group {
    display: block;
    margin: 20px auto;
    text-align: center;
  }
</style>
